<template>
	<view class="table-data">
		<view class="info">
			<view class="imgs">
				<image src="" mode="widthFix"></image>
			</view>
			<text>{{tableData.yisen.name}}<text class="tag">{{tableData.yisen.doctor_job}}</text></text>
		</view>
		<view class="table-th">
			<view class="content label">
				<view class="table-tb" v-for="item in lableLi">
					<text>{{item}}</text>
				</view>
			</view>
			
			<view class="content word">
				<view class="table-tb">
					<text>成都市第三人民医院</text>
				</view>
				<view class="table-tb">
					<text>武侯区成华大道二仙桥</text>
					<text class="t-icon t-icon-shouhuodizhi-01" font-size="28rpx"></text>
				</view>
				<view class="table-tb">
					<text>{{tableData.yisen.site}}</text>
					
				</view>
				<view class="table-tb">
					<text>{{tableData.yonghu.sched_data}} {{tableData.yonghu.day}}</text>				
				</view>
				<view class="table-tb">
					<text>{{tableData.sxwu}} {{tableData.sjduan}}</text>				
				</view>
				<view class="table-tb">
					<text class="price">¥{{tableData.yisen.price}}</text><text class="subtitle"> （就诊时支付）</text>				
				</view>
				<view class="table-tb">
					<text> {{dtais}}</text>				
				</view>
			</view>		
		</view>			
	</view>
	<view class="table-data">
		<view class="table-th">
			<view class="content label">
				<view class="table-tb" v-for="(item,i) in lableList" :key="i">
					<text>{{item}}</text>
				</view>
				
			</view>
			<view class="content word">
				<view class="table-tb">
					<text>{{userData.patients_name}}</text>
				</view>
				
				<view class="table-tb">
					<text>{{userData.patients_id_number}}</text>
					
				</view>
				
			</view>		
		</view>
		
	</view>
</template>

<script>
	import {
		ref,
		reactive,
		toRefs,
		onMounted
	} from 'vue'
	import formatDay from "@/utils/format.js"
	import storage from '@/utils/storage.js'
	export default {
		props:['tableData'],
		setup() {
			const data = reactive({
				lableLi: [
					'就诊医院', '医院地址', '就诊科室', '门诊时间', '候诊时间', '费用', '预约时间',
				],
				lableList:[
					'就诊人','身份证号'
				],
				dtais:null,
				userData:{}
			})
			data.userData=JSON.parse(storage.get('hzdata'))
			console.log(data.userData);
            data.dtais=formatDay(new Date())
			return {
				...toRefs(data)
			}
		}
	}
</script>

<style lang="scss">
	.table-data {
		padding: 0 24rpx;
		border-radius: 20rpx;
		border: 1px solid #f3f3f3;
        margin-bottom: 36rpx;
		.info {
			display: flex;
			height: 130rpx;
			align-items: center;
			border-bottom: 1px solid #eee;
			.imgs {
				width: 80rpx;
				height: 80rpx;
				background-color: #eee;
				border-radius: 12rpx;
				margin-right: 20rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}

			.tag {
				margin-left: 12rpx;
				font-size: 24rpx;
				color: #999;
			}
		}

		.table-th {
              display: flex;
			  width: 100%;
			.label {
				color: #999;
				width: 180rpx;
			}
			.table-tb{
				display: flex;
				align-items: center;
				height: 100rpx;
				font-size: 28rpx;
				border-top: 1px solid #eee;
				.t-icon {
					width: 36rpx;
					height: 36rpx;
					margin-left: 16rpx;
				}
				.price{
					color:#FF0033;
				}
				.subtitle{
					color: #999;
				}
				&:nth-child(1){
					border: none;
				}
			}
			.content{
				display: flex;
				flex-flow: column;
			
				color: #999;
			}
			.word{
				color: #333;
				width: 100%;
			}

		}
	}
</style>
